<!doctype html>
<html>
<head>
	<title>Export to PNG</title>
	<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
	<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

	<link rel="stylesheet" type="text/css" href="../common/samples.css">
	<script type="text/javascript" src="../../common/testdata.js"></script>
	<style type="text/css">
		html,body{ height:100%; margin:0}
		.webix_view.toolbar{
			background: #fafafa;
		}
	</style>
</head>
<body>
<div id="dataDiv"></div>

<script>

	webix.ui({
		container:"dataDiv",

		padding: 20,
		rows: [
			{
				id: "table",
				view:"datatable",
				columns:[
					{ id:"rank",	header:"", css:"rank",  		width:50},
					{ id:"title",	header:"Film title",width:250},
					{ id:"year",	header:"Released" , width:80},
					{ id:"votes",	header:"Votes", 	width:100}
				],
				autowidth:true,
				height: 450,
				data:big_film_set
			},
			{
				view: "form",
				css: "toolbar",
				paddingY: 5,
				paddingX: 10,
				cols:[
					{
						view: "label", label: "Export"
					},
					{
						view: "button", type: "iconButton", icon:"image", width:150, label: "Export to PNG", click:function(){
							webix.toPNG($$("table"),"table");
						}
					}
				]

			}
		]
	});
</script>
</body>
</html>
